// 样式重置
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
  margin:0; 
  padding:0;
  line-height: 1;
}
// body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
// a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; } 
ul {
  list-style: none;
 }
 
 a {
  text-decoration: none;
  color: #333;
 }

// 公共样式
html, body {
 // 禁止用户复制
 -webkit-user-select: none;
 user-select: none;
}

.bd {
  border: 1px solid;
}

// (1) 宽度和高度
.mw-980 {
  max-width: 980px;
  margin: 0 auto;
}
.h100pc {
  height: 100%;
 }
 .w100pc {
  width: 100%;
 }


// (2) bfc
.ovh {
 overflow: hidden;
}
.ova {
 overflow: auto;
}

// (3) display
.inb {
 display: inline-block;
}
.dsn {
 display: none;
}

// (4) 定位
.fixed {
 position: fixed;
}
.rel {
 position: relative;
}
.abs {
 position: absolute;
}

// (5) 浮动
.fl {
 float: left;
}

.fr {
 float: right;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
 }

 // (6)加粗
.fw400 {
  font-weight: 400;
}
.bold {
  font-weight: bold; // 900
}

// (7)居中
.tac {
 text-align: center;
}

// (8) 行高
.lh15 {
 line-height: 1.5;
}

// (9) 盒模型
.bzb {
  box-sizing: border-box;
}

// (10) 手形光标
.cp {
  cursor: pointer;
}body {
 background: #f4f4f4;
}

// 颜色设置
.orange {
  color: #ff5f16;
}
.fff {
  color: #ffffff;
}

// (11) 背景颜色
.bg-green {
  background: green;
}
.bg-gray {
  background: gray;
}
.bg-fff {
  background: #ffffff;
}
.bg-black {
  background: #222426;
}

// (12) 字体大小
.f0 {
 font-size: 0;
}
// 字体相关
@0px: 0px;
// margin-left
.font(@n, @i: 12) when (@i =< @n) {
 .f@{i} {
   font-size: @i+@0px;
 }
 .font(@n, (@i + 2));
 // +2得到的结果是1,3,5,7
 // .mg-l(@n, (@i + 2));
}
.font(36);

// 指定数组
// @0px: 0px;
// .ml-loop(@list, @i: 1, @val: extract(@list, @i)) when (length(@list)>=@i) {
//   .ml@{val} {
//     margin-left: @val + @0px;
//   }
//   .ml-loop(@list, (@i+1));
// }
// @marginLeft: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 24, 30, 40, 48, 50, 75;
// .ml-loop(@marginLeft);

// (13) margin-left
@0px: 0px;
// margin-left
.mg-l(@n, @i: 1) when (@i =< @n) {
 .mg-l-@{i} {
   margin-left: @i+@0px;
 }
 .mg-l(@n, (@i + 1));
 // +2得到的结果是1,3,5,7
 // .mg-l(@n, (@i + 2));
}
.mg-l(30);

// (14) margin-top
.mg-t(@n, @i: 1) when (@i =< @n) {
 .mg-t-@{i} {
   margin-top: @i+@0px;
 }
 .mg-t(@n, (@i + 1));
 // +2得到的结果是1,3,5,7
 // .mg-l(@n, (@i + 2));
}
.mg-t(60);
.mg-t-90 {
  margin-top: 90px;
}


// (15) padding-left
.pd-l(@n, @i: 1) when (@i =< @n) {
  .pd-l-@{i} {
    padding-left: @i+@0px;
  }
  .pd-l(@n, (@i + 1));
  // +2得到的结果是1,3,5,7
  // .mg-l(@n, (@i + 2));
 }
 .pd-l(30);

 // (16) padding-top
.pd-t(@n, @i: 1) when (@i =< @n) {
  .pd-t-@{i} {
    padding-left: @i+@0px;
  }
  .pd-t(@n, (@i + 1));
  // +2得到的结果是1,3,5,7
  // .mg-l(@n, (@i + 2));
 }
 .pd-t(30);